<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/12 14:01
 -->
<template>
  <div class="page">
    <div class="page__header">
      <div class="flex items-center text-white">
        <img src="@/libs/assets/images/logo-white.png" class="w-32px h-32px" />
        <span class="ml-14px text-16px font-bold">统一门户网站</span>
      </div>

      <div class="flex items-center">
        <el-button type="text">
          <span class="text-white text-14px" @click="onRouteToLogin">返回登陆</span>
        </el-button>
      </div>
    </div>

    <div class="page__body px-15px py-4px py-40px">
      <div class="w-[1150px] m-auto mb-10px">
        <g-title><span class="text-24px">注册新账号</span></g-title>
      </div>
      <el-card class="w-[1150px] m-auto border-1px p-20px" shadow="hover">
        <el-steps :active="active" finish-status="success" simple>
          <el-step title="填写基础信息" description="填写基础信息"> </el-step>
          <el-step title="角色绑定" description="角色绑定"></el-step>
          <el-step title="完成注册" description="完成注册"> </el-step>
        </el-steps>

        <template v-if="active == 1">
          <el-form :model="form" label-width="90px" class="py-30px w-[725px] mx-auto">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  prop="title"
                  label="登陆账号"
                  :rules="[{ required: true, message: '请输入登陆账号', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入登陆账号" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="content"
                  label="姓名"
                  :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="pass"
                  label="密码"
                  :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入密码" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="content"
                  label="性别"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="content"
                  label="出生日期"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="content"
                  label="身份证"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="content"
                  label="部门"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="content"
                  label="职称"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item
                  prop="content"
                  label="性别"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="flex justify-center">
              <el-button type="primary" @click="active++">下一步</el-button>
            </div>
          </el-form>
        </template>

        <template v-else-if="active == 2">
          <el-form :model="form" label-width="90px" class="py-40px w-[725px] mx-auto">
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="content"
                  label="角色"
                  :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                  <el-input v-model="form.title" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="flex justify-center">
              <el-button type="primary" @click="active++">下一步</el-button>
            </div>
          </el-form>
        </template>

        <template v-else-if="active == 3">
          <el-result icon="success" sub-title="用户注册成功">
            <template slot="extra">
              <el-button type="primary">继续注册</el-button>
              <el-button @click="onRouteToLogin">去登陆</el-button>
            </template>
          </el-result>
        </template>
      </el-card>
    </div>

    <div class="page__footer">Copyright © 2022-{{ new Date().getFullYear() }} 门户网 All Rights Reserved</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      form: {
        title: '',
        content: ''
      }
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {
    onRouteToLogin() {
      this.$router.push('/backsys/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  //background-color: #fff;
  .page__header {
    width: 100%;
    flex-basis: 52px;
    background-color: $--color-primary;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    div:nth-child(1) {
      flex: 1;
    }
  }
  .page__body {
    flex: 1;
    height: calc(100vh - 52px - 60px);
    overflow: auto;
    //display: flex;
    //align-items: center;
  }
  .page__footer {
    flex-basis: 60px;
    background-color: rgba($--color-primary, 0.12);
    @include flex-center();
    color: $--color-primary;
    font-size: 14px;
  }
}
</style>
